<template>
  <div class="payment-miniapp">
    <div class="payment-miniapp-tab tabs-box">
      <el-tabs
        v-model="activeName"
        type="border-card"
        @tab-click="tabClick"
      >
        <el-tab-pane
          label="分销方"
          name="Distribution"
        > </el-tab-pane>
        <el-tab-pane
          label="内容方"
          name="Content"
        > </el-tab-pane>
        <!-- <el-tab-pane
          label="制作方"
          name="Producer"
        > </el-tab-pane>
        <el-tab-pane
          label="版权方"
          name="Copyright"
        > </el-tab-pane>
        <el-tab-pane
          label="编剧方"
          name="Scriptwriter"
        > </el-tab-pane> -->
      </el-tabs>
    </div>
    <Content v-if="activeName === 'Content'"></Content>
    <Scriptwriter v-if="activeName === 'Scriptwriter'"></Scriptwriter>
    <Copyright v-if="activeName === 'Copyright'"></Copyright>
    <Producer v-if="activeName === 'Producer'"></Producer>
    <Distribution v-if="activeName === 'Distribution'"></Distribution>
  </div>
</template>

<script>
import Content from './content/index.vue'
import Distribution from './Distribution/index.vue'
import Producer from './Producer/index.vue'
import Copyright from './Copyright/index.vue'
import Scriptwriter from './Scriptwriter/index.vue'
export default {
  components: {
    Content,
    Scriptwriter,
    Copyright,
    Producer,
    Distribution
  },
  data() {
    return {
      activeName: 'Distribution'
    }
  },
  mounted() {
    this.$AccessReport.report('zhangyu-cooperate', [this.$store.state.user.routerItem.name, '合作方管理', '分销方'])
  },
  methods: {
    tabClick() {
      if (this.activeName == 'Distribution') {
        this.$AccessReport.report('zhangyu-cooperate', [this.$store.state.user.routerItem.name, '合作方管理', '分销方'])
      } else {
        this.$AccessReport.report('zhangyu-cooperate', [this.$store.state.user.routerItem.name, '合作方管理', '内容方'])
      }
    }
  }

}
</script>

<style lang="scss" scoped>

</style>